<template>
    <div class="table-body">
         <!-- <table width="800px" border="1" cellspacing ='0' > -->
            <tr v-for="(item,index) in $store.state.shopCar" :key="index">
                <td>
                    <input type="checkbox" v-model="item.status" @change="checks">
                </td>
                <td>{{item.id}}</td>
                <td>{{item.productName}}</td>
                <td>
                    <img :src="'/img/'+item.productImage" alt="">
                </td>
                <td>{{item.salePrice}}</td>

                <!-- element-plus 中的数字输入框、 自己写 ？？？？？？？？？？？？？？？ -->
                <td>
                     <el-input-number v-model="item.num" :min="1" @change="handleChange" />
                </td>
                <td>
                    <button @click="del(index)">删除</button>
                </td>
                
            </tr>
        <!-- </table> -->
    </div>
</template>
<script>
import {computed,ref,reactive,toRefs} from 'vue'
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
export default {
    setup(props) {
        const {commit} = useStore()
       const checks=()=>{
          commit('checks')
       }
       const del = (index)=>{
        commit('del',index)
       }
      const handleChange=()=>{
        commit('kong')
      }
       return {checks,del,handleChange}
    }
}
</script>
<style lang="scss" scoped>
table{
    td{
        width:100px;
        img{
            width: 80px;
            height: 80px;
        }
    }
}
</style>
